<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        [v-cloak] {
            display: none;
        }
    </style>
</head>
<body>
<div id="app">
<!--mustache：大胡子语法，只能写在标签之间，不能写在标签属性中-->
    {{ message }}
<!--vue的常用指令
        指令一般写在标签中，即也是标签的属性，只是这个属性只有vue认识
        v-once：表示该标签中的属性和内容不会再变化
        v-bind：操作标签属性
        v-if：判断是否绘制该标签，如果是false，表示不存在该标签。与display:none；(看不见)不一样
-->
    <span v-once>这个将不会改变: {{ msg }}</span>
    <p v-cloak>Using mustaches: {{ rawHtml }}</p>
    <p>Using v-html directive: <span v-html="rawHtml"></span></p>
    <input type="text" v-bind:value="message">
    <select>
        <option v-bind:selected="selectedIndex == 1">1</option>
        <option v-bind:selected="selectedIndex == 2">2</option>
        <option v-bind:selected="selectedIndex == 3">3</option>
    </select>
    <p v-if="seen">false：不存在，true：存在</p>
    <a v-bind:[hrefname]="url"> 百度一下 </a>
    <p v-text="message" v-show="seen"></p>
    <p v-if="type == 0">欢迎您，系统管理员</p>
    <p v-else-if="type == 1">欢迎您，宿舍管理员</p>
    <p v-else-if="type == 2">欢迎您，学生</p>
    <p v-else>非法访问</p>
    <span v-pre>不会解析mustache: {{ msg }}</span>
    <span v-pre>{{ msg }}表达式的值为</span><span>{{ msg }}</span>
    <span v-pre>v-cloak：是遮罩，即访问页面加载过程出的{{变量名}}</span>
<!--i表示数组中的元素-->
    <ul>
        <li v-for="i in list" v-once>{{i}}</li>
    </ul>
<!--    如果需要获取数组的元素值和索引-->
    <ul>
<!--        <li v-for="(item, index) in list" v-bind:id="index">{{item}}</li>-->
        <li v-for="(item, index) in list" v-bind:id="index" v-text="item"></li>
    </ul>
    <ul>
<!--        <li v-for="(val, key, index) in list" v-bind:id="index">{{key}} : {{val}}</li>-->
        <li v-for="(val, key, index) in book" v-bind:id="index" v-text="key + ':' + val"></li>
    </ul>
    <ul>
        <li v-if="item % 2 == 0" v-for="(item, index) in pager.total" v-text="item + ':' + index"></li>
        for(let i in 10) {
            if(i % 2 == 0)
        }
    </ul>
    <ul v-if="seen">
        <li v-for="(item, index) in pager.total" v-text="item + ':' + index"></li>
    </ul>
</div>
<button id="btn">点击修改msg或message中的内容</button>
<div>
    {{ message }}
</div>
<script src="../js/vue.js"></script>
<script>
    //创建一个vue对象名为app
    let app = new Vue({
        el: '#app',//element，该vue对象是挂载在哪个标签上。挂载之后就可以操作该标签及其后代标签
        //定义数据的对象，在vue中所有数据都要定义在data中
        //data是属性，后面会学习data方法
        data: {
            message: 'Hello Vue!',
            msg: "这是自定义的一个属性",
            rawHtml: "<a href='#'>这是一个超链接</a>",
            selectedIndex: 2,
            seen: true,
            hrefname: "href",
            type: 0,
            url: "http://www.baidu.com",
            list: [1, 5, 3, 6, 8],
            book: {id: 1, name: 'Java从入门到放弃', price: 80, tdate: '2020-07-01', count: 1, email: "haha"},
            pager: {
                total: 10
            }
        }
    });
    document.querySelector("#btn").onclick = function () {
        app.message = 456;
        app.msg = 456;
        setTimeout(function () {
            console.log(app.msg);
        }, 1000)
    }
</script>
</body>
</html>